import { useState, useEffect } from 'react'
import { Card, Tree, Tag, Switch } from 'antd'
import type { TreeProps } from 'antd'
import { getRuleList } from '@/api/rule'
import { createFromIconfontCN } from '@ant-design/icons'
const IconFont = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/c/font_4612542_uxeqjh2yzd.js' // 在 iconfont.cn 上生成
})
function Access() {
  useEffect(() => {
    getList()
  }, [])
  const [ruleList, setRuleList] = useState([])

  const [expandedKeys, setExpandedKeys] = useState<React.Key[]>([])
  const [checkedKeys, setCheckedKeys] = useState<React.Key[]>([])
  const [selectedKeys, setSelectedKeys] = useState<React.Key[]>([])
  const [autoExpandParent, setAutoExpandParent] = useState<boolean>(true)
  const getList = () => {
    getRuleList().then(res => {
      console.log(res.data.list)

      setRuleList(res.data.list)
      //   setExpandedKeys(res.data.list.map((o: any) => o.id))
    })
  }
  const onExpand: TreeProps['onExpand'] = expandedKeysValue => {
    setExpandedKeys(expandedKeysValue)
    setAutoExpandParent(false)
  }

  const onCheck: TreeProps['onCheck'] = checkedKeysValue => {
    setCheckedKeys(checkedKeysValue as React.Key[])
  }

  const onSelect: TreeProps['onSelect'] = selectedKeysValue => {
    setSelectedKeys(selectedKeysValue)
  }
  const handleTitleClick = (node: any) => {
    const key = node.id
    const newExpandedKeys = expandedKeys.includes(key) ? expandedKeys.filter(k => k !== key) : [...expandedKeys, key]
    setExpandedKeys(newExpandedKeys)
    setAutoExpandParent(false)
  }
  const delRoleBtn = (e: Event, id: number) => {
    e.stopPropagation()
  }
  // 自定义标题内容
  const titleRender = (nodeData: any) => {
    return (
      <div style={{ display: 'flex', justifyContent: 'space-between', width: '100%' }} onClick={() => handleTitleClick(nodeData)}>
        <div>
          <Tag color={nodeData.menu === 1 ? '#87d068' : ''}>{nodeData.menu === 1 ? '菜单' : '权限'}</Tag>
          {nodeData.icon && <IconFont type={'icon-' + nodeData.icon} style={{ margin: '0 5px', fontSize: '20px' }} />}
          <span style={{ color: '#606266', fontSize: '16px' }}>{nodeData.name}</span>
        </div>
        <div>
          <Tag color='#9dc0fa'>修改</Tag>
          <Tag color='#9dc0fa'>新增</Tag>
          <Tag
            color='#f50'
            onClick={(e: any) => {
              delRoleBtn(e, nodeData.id)
            }}
          >
            删除
          </Tag>
        </div>
      </div>
    )
  }
  return (
    <>
      {/*  <IconFont type={'icon-' + item.icon} /> */}
      <Card>
        权限管理
        <Tree
          className='w100'
          onExpand={onExpand}
          expandedKeys={expandedKeys}
          autoExpandParent={autoExpandParent}
          onCheck={onCheck}
          checkedKeys={checkedKeys}
          onSelect={onSelect}
          selectedKeys={selectedKeys}
          treeData={ruleList}
          fieldNames={{ title: 'name', key: 'id', children: 'child' }}
          titleRender={titleRender}
        />
      </Card>
    </>
  )
}
export default Access
